<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>html5 canvas demo (example) -- zswang 2010</title>
		<style type="text/css">
			#divTools{
				position:absolute;
				left:10px;
				top:10px;
				height:27px;
			}
			#divCanvas{
				position:absolute;
				left:10px;
				top:40px;
				border:solid red 1px;
			}
			#divCode{
				position:absolute;
				left:415px;
				top:40px;
				height:400px;
				width:400px;
				border:dotted blue 1px;
			}
			#preCode{
				padding:0;
				margin:0;
			}
		</style>
	</head>
	<body>
		<div id="divTools"></div>
		<div id="divCanvas"><canvas id="canvas" width="400" height="400"></canvas></div>
		<div id="divCode"><pre id="preCode"></pre></div>
		<script>
			var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"),
				divTools = document.getElementById("divTools"),
				preCode = document.getElementById("preCode");
			/**
			 * 添加测试代码
			 * @param {String} text 测试主题
			 * @param {Function} func 执行函数
			 */
			function addCase(text, func) {
				var button = document.createElement("input");
				button.type = "button";
				button.value = text;
				button.onclick = function(){
					context.save();
					func();
					context.restore();
				};
				button.onmouseover = function(){
					preCode.innerHTML = ("" + func).replace(/[<>&]/g, function(all) {
						return { "<": "&lt;", ">": "&gt;", "&": "&amp;" }[all];
					});
				};
				divTools.appendChild(button);
			}
			
			addCase("清除画布", function() {
				context.clearRect(0, 0, canvas.width, canvas.height);
			});
		</script>
	</body>
</html>